<template>
  <div class="goods-item">
    <div class="item-img">
      <img :src="goods.mealPictures[0]" :alt="goods.mealName" />
    </div>
    <div class="item-details">
      <div class="name">{{ goods.mealName }}</div>
      <div class="unit">份</div>
      <div class="price">￥{{ goods.mealPrice }}</div>
    </div>
    <div class="ope-btn">
      <div class="sub" @click="updateBuyCount(goods, false)">
        <van-icon name="minus" color="rgb(168, 168, 168)" />
      </div>
      <div class="count">{{ goods.buyCount }}</div>
      <div class="add" @click="updateBuyCount(goods, true)">
        <van-icon name="plus" color="#fff" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "goodsItem",
  props: ["goods"],
  computed: {
    ...mapState("m_user", ["billList"]),
  },
  methods: {
    ...mapMutations("m_user", ["setBillList"]),
    updateBuyCount(goods, isAdd) {
      // let tempBillList = this.deepClone(this.billList); // 这里不需要深拷贝, 不然的话下面的indexOf会找不到
      let tempBillList = this.billList;
      let CurIndex = -1; // 默认是-1 未找到
      tempBillList.some((ele, index) => {
        if (ele.mealId === goods.mealId) {
          CurIndex = index;
          return true;
        }
      });
      // let index = tempBillList.indexOf(goods);
      if (~CurIndex) {
        // 如果未找到就不需要删除, 如果是更新就删除掉原来的
        tempBillList.splice(CurIndex, 1);
      } else {
        // index 为 -1的时候让它为0, 到时候添加的时候往最前面添加
        CurIndex = 0;
      }

      let flag = true; // 控制是否添加的变量
      if (isAdd) {
        goods.buyCount++;
      } else {
        goods.buyCount--;
        if (goods.buyCount <= 0) {
          goods.buyCount = 0;
          flag = false; // 删除就行不需要添加
        }
      }

      if (flag) {
        // 在原来的位置添加最新的
        tempBillList.splice(CurIndex, 0, goods);
      }

      this.setBillList(tempBillList);
      // jwt加密后存入localStorage中, 防止恶意篡改localStorage数据, jwt加密必须是对象形式
      let tempBill = this.$jwt.sign(
        { bill: tempBillList },
        this.$appConfig.jwt_secret,
        {
          expiresIn: "1day",
        }
      );
      localStorage.setItem("shopCar", tempBill);

      if (tempBillList.length <= 0) {
        localStorage.removeItem("shopCar");

        this.$emit("billIsNull");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-item {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 10px;

  .item-img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
  }

  .item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    flex-grow: 1;

    .name {
      font-size: 16px;
    }

    .unit {
      font-size: 12px;
      color: rgb(168, 168, 168);
    }

    .price {
      font-size: 16px;
      color: rgb(212, 3, 3);
    }
  }

  .ope-btn {
    display: flex;
    align-items: flex-end;

    .count {
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin: 0 10px;
    }

    .sub,
    .add {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: rgba(13, 174, 238, 0.918);
    }

    .sub {
      border: 1px solid rgb(168, 168, 168);
      background-color: #fff;
    }
  }
}
</style>
